<template>
	<div class="export-dialog-view" v-loading="pageLoading">
		<div class="export-dialog">
			<div class="left-lay">
				<div class="split-title">{{ title }}</div>
				<div class="left-line">
					<div class="line-title">
						{{ $t("message.bhView.leftComponents.device") }}
					</div>
					<div class="line-value">{{ $store.state.plantName }}</div>
				</div>

				<div class="left-line">
					<div class="line-title">
						{{ $t("message.bhView.leftComponents.object") }}
					</div>
					<div class="line-value">
						{{
							$store.state.macType == 1
								? $t("message.bhView.leftComponents.machine")
								: $t("message.bhView.leftComponents.piping")
						}}
					</div>
				</div>

				<div class="left-line">
					<div class="line-title">
						{{ $t("message.reportFrom.exportDialog.title_c") }}
					</div>
					<div class="line-value">{{ fileTypeStr }}</div>
				</div>




			</div>

			<div class="tip-lay"></div>

			<div class="right-lay">
				<div class="split-title text-right">
					<i class="el-icon-close" @click="CloseExprotDiloag"></i>
				</div>
				<div class="split-title">
					{{ $t("message.reportFrom.exportDialog.title_l") }}
				</div>
				<div class="right-line">
					<div class="line-title">
						{{ $t("message.reportFrom.exportDialog.title_a") }}
					</div>
					<div class="line-content">
						<span>~</span>
						<!-- <el-date-picker
							v-model="formExDate"
							type="month"
							value-format="yyyy-MM"
							placeholder=" "
							class="ipt picker"
						>
						</el-date-picker> -->
						<el-date-picker v-model="formExDate" type="month" :format="format" :value-format="format"
							placeholder=" " class="ipt picker orange">
						</el-date-picker>
						<span>以前</span>
					</div>
				</div>

				<div class="right-block-container">
					<div class="right-line">
						<div class="line-title">
							{{ $t("message.reportFrom.exportDialog.title_b") }}
						</div>
					</div>
					<div class="right-line">
						<el-radio-group v-model="formCorrRateRule">
							<el-radio :label="4">{{
								$t("message.reportFrom.exportDialog.radio_1d")
							}}</el-radio>
							<el-radio :label="1">{{
								$t("message.reportFrom.exportDialog.radio_1a")
							}}</el-radio>
							<el-radio :label="2">{{
								$t("message.reportFrom.exportDialog.radio_1b")
							}}</el-radio>
							<el-radio :label="3">{{
								$t("message.reportFrom.exportDialog.radio_1c")
							}}</el-radio>
						</el-radio-group>
					</div>
				</div>

				<div class="right-block-container">
					<div class="right-line">
						<div class="line-title">
							{{ $t("message.reportFrom.exportDialog.title_c") }}
						</div>
					</div>
					<div class="right-line">
						<el-radio-group v-model="formDailyExType">
							<el-radio :label="1">{{
								$t("message.reportFrom.exportDialog.radio_2a")
							}}</el-radio>
							<el-radio :label="2">{{
								$t("message.reportFrom.exportDialog.radio_2b")
							}}</el-radio>
							<el-radio :label="3">{{
								$t("message.reportFrom.exportDialog.radio_2c")
							}}</el-radio>
						</el-radio-group>
					</div>
				</div>

				<div class="right-block-container">
					<div class="right-line">
						<div class="line-title">
							{{ $t("message.reportFrom.exportDialog.title_d") }}
						</div>
					</div>
					<div class="right-line">
						<el-checkbox-group v-model="formDeterName" :min="1">
							<el-checkbox checked :label="1">{{
								$t("message.reportFrom.exportDialog.check_3a")
							}}</el-checkbox>
							<el-checkbox :label="2">{{
								$t("message.reportFrom.exportDialog.check_3b")
							}}</el-checkbox>
							<el-checkbox :label="3">{{
								$t("message.reportFrom.exportDialog.check_3c")
							}}</el-checkbox>
						</el-checkbox-group>
					</div>
				</div>

				<div class="right-block-container">
					<div class="right-line">
						<div class="line-title">
							{{ $t("message.reportFrom.exportDialog.title_e") }}
						</div>
					</div>
					<div class="right-line">
						<el-radio-group v-model="formCorrRateMark">
							<el-radio :label="1">{{
								$t("message.reportFrom.exportDialog.check_4a")
							}}</el-radio>
							<el-radio :label="0">{{
								$t("message.reportFrom.exportDialog.check_4b")
							}}</el-radio>
						</el-radio-group>
					</div>
				</div>

				<div class="right-block-container">
					<div class="right-line">
						<div class="line-title">
							{{ $t("message.reportFrom.exportDialog.title_f") }}
						</div>
					</div>
					<div class="right-line">
						<el-radio-group v-model="formInspecter">
							<el-radio :label="1">{{
								$t("message.reportFrom.exportDialog.check_4a")
							}}</el-radio>
							<el-radio :label="0">{{
								$t("message.reportFrom.exportDialog.check_4b")
							}}</el-radio>
						</el-radio-group>
					</div>
				</div>

				<div class="right-block-container">
					<div class="right-line">
						<div class="line-title">
							{{ $t("message.reportFrom.exportDialog.title_g") }}
						</div>
					</div>
					<div class="right-line">
						<el-radio-group v-model="formInspectCertificateNo">
							<el-radio :label="1">{{
								$t("message.reportFrom.exportDialog.check_4a")
							}}</el-radio>
							<el-radio :label="0">{{
								$t("message.reportFrom.exportDialog.check_4b")
							}}</el-radio>
						</el-radio-group>
					</div>
				</div>

				<div class="right-block-container">
					<div class="right-line">
						<div class="line-title">
							{{ $t("message.reportFrom.exportDialog.title_h") }}
						</div>
					</div>
					<div class="right-line">
						<el-radio-group v-model="formUpdBeforMeasuredValue">
							<el-radio :label="1">{{
								$t("message.reportFrom.exportDialog.check_4a")
							}}</el-radio>
							<el-radio :label="0">{{
								$t("message.reportFrom.exportDialog.check_4b")
							}}</el-radio>
						</el-radio-group>
					</div>
				</div>

				<div class="right-line">
					<div class="line-title" style="width: 30%">
						{{ $t("message.reportFrom.exportDialog.title_i") }}
					</div>
					<div class="line-content">
						<el-select v-model="formWindcraftJudgColor" class="select-ipt orange"
							style="margin: 0 8px 0 16px" placeholder=" ">
							<el-option v-for="item in corrColorData" :key="item.key" :label="item.label"
								:value="item.key">
							</el-option>
						</el-select>
					</div>
				</div>

				<div class="right-line">
					<div class="divider" />
				</div>

				<div class="right-line bottom-border">
					<div class="line-title" style="width: 30%">
						{{ $t("message.reportFrom.exportDialog.title_j") }}
					</div>
					<div class="line-content">
						<el-select v-model="operDate" class="select-ipt orange" style="margin: 0 8px 0 16px"
							placeholder=" ">
							<el-option v-for="item in LifeAssBaseDate" :key="item.value" :label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
					</div>
				</div>

				<!-- <div class="right-line">
					<div class="line-title" style="width: 100%">
						{{ $t("message.reportFrom.exportDialog.tip") }}
					</div>
				</div> -->

			</div>
			<div class="FIX">
				<getSvgView v-show="true" ref="cadViewForBH" @changeWait="changeWait" />
			</div>
			<footer class="footer-view">
				<div class="">
					<div class="line-title" style="width: 100%">
						{{ $t("message.reportFrom.exportDialog.tip") }}
					</div>
				</div>
				<div>
					<el-button @click="CloseExprotDiloag">Cancel</el-button>
					<el-button type="primary" @click="onExportClick">OK</el-button>
				</div>
			</footer>
		</div>
	</div>
</template>

<script>
import {
	GetThickDeterResLifeAssBaseDate,
	getWindcraftJudgColor,
	getCorrColorData,
	getFile,
	getSvgData,
	exThickDeterResReport,
	CollectFiles,
	ExThickDeterResReportVerify
} from "@/api/api";
import * as svg_opt from "@/utils/svg_opt.js";
import { getLocalStorage } from "@/utils/storage";
import timeFormat from "@/utils/timeFormat";
import getSvgView from "./Export/getSvg.vue";
export default {
	props: ["title", "fileTypeStr", "selectMacData", "fileRadio"],
	name: "ExportDialog",
	components: { getSvgView },
	data() {
		return {
			pageLoading: false,
			state: true,
			LifeAssBaseDate: [],

			corrColorData: [],

			// drawableData 图纸数据
			isSvgLoaded: false,
			svgSourceUrl: "", // 图纸地址
			drawableData: null, // 图纸数据

			markupsPosList: [], // 球标组

			exportDrawContentList: [],
			exportCurrentIndex: 0,
			cachedReDatas: [],

			formExDate: "",
			formCorrRateRule: 4,
			formDailyExType: 1,
			formDeterName: [],
			formCorrRateMark: 1,
			formInspecter: 1,
			formInspectCertificateNo: 1,
			formUpdBeforMeasuredValue: 1,
			formWindcraftJudgColor: "",
			operDate: "",
			format: timeFormat()
		};
	},
	watch: {},
	methods: {
		getLifeAssBaseDateApi() {
			GetThickDeterResLifeAssBaseDate({
				PltCode: this.$store.state.pltCode,
			}).then((res) => {
				if (res.data.code != 0) {
					return;
				}
				res.data.data.forEach((dateItem) => {
					this.LifeAssBaseDate.push({
						label: dateItem,
						value: dateItem,
					});
				});
				this.operDate = this.LifeAssBaseDate[6].value;
			});
		},

		getWindcraftJudgColorApi() {
			getWindcraftJudgColor().then((res) => {
				console.log(res, 333333333333333);
				if (res.data.code != 0) {
					return;
				}
				this.corrColorData = res.data.data;
				this.corrColorData.unshift(this.corrColorData.pop())
				this.formWindcraftJudgColor = this.corrColorData[0].key;
			});
		},

		CloseExprotDiloag() {
			this.$emit("CloseExprotDiloag");
		},

		reloadMachineDrawing(inData) {
			console.log("reloadMachineDrawing --- ", inData);
			let data = {
				DmgCode: inData.macCode,
				CorrCode: this.formWindcraftJudgColor.toString(),
				BlnCorrCode: this.formWindcraftJudgColor.toString(),
				SelectDate: this.operDate,
				PltCode: inData.pltCode,
				Option: "",
				PosCode: "-1",
				CorrJudg: "",
				Account: getLocalStorage("userName"),
			};

			getSvgData(data).then(async (res) => {
				console.log("res---", res);
				if (!res || res.data.code != 0) {

					this.pageLoading = false;

					// 请求参数
					let temp = {
						excuType: Number(this.fileRadio),
						pltCode: this.selectMacData[this.exportCurrentIndex].pltCode,
						macType: this.selectMacData[this.exportCurrentIndex].macType,
						dmgCode: this.selectMacData[this.exportCurrentIndex].macCode,
						exDate: this.formExDate,
						corrRateRule: this.formCorrRateRule,
						dailyExType: this.formDailyExType,
						deterName: this.formDeterName.toString(),
						corrRateMark: this.formCorrRateMark,
						inspecter: this.formInspecter,
						inspectCertificateNo: this.formInspectCertificateNo,
						updBeforMeasuredValue: this.formUpdBeforMeasuredValue,
						windcraftJudgColor: this.formWindcraftJudgColor,
						lifeAssBaseDate: this.operDate,
						svgHtml: '',
					};

					let re = await exThickDeterResReport(temp);
					this.cachedReDatas.push(re.data.data);

					this.exportCurrentIndex++;
					if (this.exportCurrentIndex < this.selectMacData.length) {
						this.reloadMachineDrawing(
							this.selectMacData[this.exportCurrentIndex]
						);
					} else {
						if (this.cachedReDatas.length == 1) {
							this.$emit("CloseExprotDiloag");
							window.open(this.cachedReDatas[0]);
							this.pageLoading = false;
							return;
						}

						let zipRe = await CollectFiles({
							pdfList: this.cachedReDatas,
						}).catch((err) => {
							console.log(err)
							return {
								data: {
									code: -1,
								},
							};
						});

						if (zipRe.data.code == 0) {
							this.$emit("CloseExprotDiloag");
							window.open(zipRe.data.data);
						} else {
							this.$alert(zipRe.data.msg, '', {
								confirmButtonText: 'OK',
								type: 'warning',
							});
						}

						this.pageLoading = false;
						console.log("finished");
					}

					return;
				}
				this.svgSourceUrl = "";
				let dataJson = res.data.data;

				if (dataJson.length > 0) {
					let item = dataJson[0];
					console.log(item.drW_PASS);
					// this.svgSourceUrl = item.drW_PASS;
					let inSourceUrl = item.drW_PASS;

					this.markupsPosList = this.genBallMarkupsList(dataJson);

					let num = inSourceUrl.lastIndexOf(".") + 1;
					this.sourceExt = inSourceUrl.substring(num);
					this.sourceUrl = inSourceUrl;

					let EXT = this.sourceExt
					if (
						EXT == "png" ||
						EXT == "jpg" ||
						EXT == "gif" ||
						EXT == "bmp" ||
						EXT == "jpeg" ||
						EXT == "tif" ||
						EXT == "tiff"
					) {
						this.isSourcePic = true;
						this.svgSourceUrl = require("@/assets/model/method-draw-image.svg");
					} else {
						this.isSourcePic = false;
						this.svgSourceUrl = inSourceUrl;
					}

					if (!this.loadSvgWhenReShow) this.loadSvg();
				}
			});
		},

		loadSvg() {
			console.log(this.svgSourceUrl, "this.svgSourceUrl");
			if (!this.svgSourceUrl || this.svgSourceUrl == "") {
				svg_opt.removeSvg();
				this.isSourcePic = false;
				this.markupsPosList = [];
				this.onSvgLoaded();
				return;
			}

			svg_opt.setSvgLineWidthRatio(1.5);
			svg_opt.setSvgBoundingBoxRatio(0, 10, 0.9);
			svg_opt.setCanClickSelectMarkup(false);
			svg_opt.setCanEditSelectMarkup(false);
			svg_opt.setCanFitPositionAndScale(false);
			svg_opt.setEditDotWidthRatio(3);
			svg_opt.AddSvg(this.svgSourceUrl, "left-draw", null,
					false,
					0,
					0,
					this.sourceExt == "wmf" ? 1 : -1);
			svg_opt.SetSvgMouseMode(0);
			svg_opt.setLoadCallBack(this.onSvgLoaded);
		},

		async onSvgLoaded(error) {
			if (error) {
				console.log(error);
				return;
			}
			this.isSvgLoaded = true;

			if (this.isSourcePic) {
				svg_opt.changeSvgElementData({
					tagName: "img-content",
					paramName: "xlink:href",
					newValue: this.sourceUrl,
				});
			}

			svg_opt.genMarkupOrignDataFromExternalData(this.markupsPosList);
			var tar = svg_opt.exportSvgDataStr();

			// 请求参数
			let temp = {
				excuType: Number(this.fileRadio),
				pltCode: this.selectMacData[this.exportCurrentIndex].pltCode,
				macType: this.selectMacData[this.exportCurrentIndex].macType,
				dmgCode: this.selectMacData[this.exportCurrentIndex].macCode,
				exDate: this.formExDate,
				corrRateRule: this.formCorrRateRule,
				dailyExType: this.formDailyExType,
				deterName: this.formDeterName.toString(),
				corrRateMark: this.formCorrRateMark,
				inspecter: this.formInspecter,
				inspectCertificateNo: this.formInspectCertificateNo,
				updBeforMeasuredValue: this.formUpdBeforMeasuredValue,
				windcraftJudgColor: this.formWindcraftJudgColor,
				lifeAssBaseDate: this.operDate,
				svgHtml: tar,
			};

			let re = await exThickDeterResReport(temp);
			this.cachedReDatas.push(re.data.data);

			this.exportCurrentIndex++;
			if (this.exportCurrentIndex < this.selectMacData.length) {
				this.reloadMachineDrawing(
					this.selectMacData[this.exportCurrentIndex]
				);
			} else {
				if (this.cachedReDatas.length == 1) {
					this.$emit("CloseExprotDiloag");
					window.open(this.cachedReDatas[0]);
					this.pageLoading = false;
					return;
				}

				let zipRe = await CollectFiles({
					pdfList: this.cachedReDatas,
				}).catch((err) => {
					console.log(err)
					return {
						data: {
							code: -1,
						},
					};
				});

				if (zipRe.data.code == 0) {
					this.$emit("CloseExprotDiloag");
					window.open(zipRe.data.data);
				} else {
					this.$alert(zipRe.data.msg, '', {
						confirmButtonText: 'OK',
						type: 'warning',
					});
				}

				this.pageLoading = false;
				console.log("finished");
			}
		},

		genBallMarkupsList(originData) {
			var reList = [];
			for (var i = 0; i < originData.length; i++) {
				let orignItem = originData[i];
				if (orignItem.poS_ORDR == null) continue;

				let temp = {};
				temp.sId = orignItem.poS_ORDR;
				temp.shapeType = Number(orignItem.blN_TYPE) + 12;
				temp.showType = "trans";
				temp.showID = orignItem.poS_ORDR;
				temp.lineColor = "#0000FF";
				temp.lineWidth = "5";
				temp.fontSize = orignItem.blN_FNTSIZ;
				temp.fontName = orignItem.blN_FNTNAM;
				temp.lineStyle = "0";
				temp.points = orignItem.thckBlnPoints;
				if (temp.points[0].blN_COLOR)
					temp.ballFillColor = temp.points[0].blN_COLOR;
				else temp.ballFillColor = "#ffffff";
				reList.push(temp);

				for (var j = 0; j < orignItem.thckBlnPoints.length; j++) {
					orignItem.thckBlnPoints[j].x =
						orignItem.thckBlnPoints[j].blN_X;
					orignItem.thckBlnPoints[j].y =
						orignItem.thckBlnPoints[j].blN_Y;
				}
			}
			return reList;
		},

		changeWait(e) {
			this.state = e;
		},
		wait() {
			return new Promise((resolve, reject) => {
				if (this.state) {
					resolve();
				} else {
					const intervalId = setInterval(() => {
						if (this.state) {
							clearInterval(intervalId);
							resolve();
						}
					}, 500);
				}
			});
		},
		async onExportClick() {
			this.pageLoading = true;
			let params = {
				DmgCodes: this.selectMacData.map(item => item.macCode)
			};
			let F = await ExThickDeterResReportVerify(params);
			if (!F) {
				this.pageLoading = false;
				return
			}


			let MacNumb = [];
			let svgHtml = '';
			let pdfList = [];
			for (let index = 0; index < this.selectMacData.length; index++) {
				this.pageLoading = true;
				svgHtml = '';
				let i = this.selectMacData[index];
				MacNumb.push(i.macName)
				this.$refs.cadViewForBH.getSvgByFunFn(
					i.pltCode, i.macCode, 3, i.macName, {
					DmgCode: i.macCode,
					PltCode: i.pltCode,
					LifeAssBaseDate: this.operDate,
					BaloonCor: this.formWindcraftJudgColor,
					CorrRateRule: this.formCorrRateRule,
				}
				);
				this.state = false;
				await this.wait();
				svgHtml = await this.$refs.cadViewForBH.exportSvgDataStr();

				let dataJson = {
					excuType: Number(this.fileRadio),
					pltCode: this.selectMacData[0].pltCode,
					macType: this.selectMacData[0].macType,
					dmgCode: this.selectMacData[index].macCode,
					exDate: this.formExDate,
					corrRateRule: this.formCorrRateRule,
					dailyExType: this.formDailyExType,
					deterName: this.formDeterName.toString(),
					corrRateMark: this.formCorrRateMark,
					inspecter: this.formInspecter,
					inspectCertificateNo: this.formInspectCertificateNo,
					updBeforMeasuredValue: this.formUpdBeforMeasuredValue,
					windcraftJudgColor: this.formWindcraftJudgColor,
					lifeAssBaseDate: this.operDate,
					svgHtml,
				}
				let res = await exThickDeterResReport(dataJson);
				this.pageLoading = false;
				if (res.data.code != 0 && this.selectMacData.length == 1) {
					this.$alert(res.data.msg, '', {
						confirmButtonText: 'OK',
						type: 'warning',
						callback: action => {
						}
					})
				}
				if (res.data.code == 0) {
					pdfList.push(res.data.data)
				}
			}
			this.pageLoading = false;
			if (pdfList.length == 0) {
				this.pageLoading = false;
				return
			}
			if (pdfList.length == 1) {
				this.$emit("CloseExprotDiloag");
				window.open(pdfList[0]);
			} else {
				let zipRe = await CollectFiles({
					pdfList
				}).catch((err) => {
					console.log(err)
					return {
						data: {
							code: -1,
						},
					};
				});

				if (zipRe.data.code == 0) {
					this.$emit("CloseExprotDiloag");
					window.open(zipRe.data.data);
				} else {
					this.$alert(zipRe.data.msg, '', {
						confirmButtonText: 'OK',
						type: 'warning',
					});
				}
			}
			this.$emit("CloseExprotDiloag");

			this.pageLoading = false;

			return
		},

		getTime() {
			let date = new Date();
			let year = date.getFullYear();
			let mounth = date.getMonth() + 1;
			this.formExDate = `${year}-${mounth}`;
		}
	},
	created() {
		this.getTime();
		this.getLifeAssBaseDateApi();
		this.getWindcraftJudgColorApi();
	},
	mounted() { },
	beforeDestroy() { },
	destroyed() { },
};
</script>
<style lang="scss" scoped>
.export-dialog-view {
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	z-index: 6;
}

.export-dialog {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 712px;
	height: 730px;
	// height: 292px;
	background: #ffffff;
	box-shadow: 0px 12px 48px 16px rgba(0, 0, 0, 0.05),
		0px 9px 28px 0px rgba(0, 0, 0, 0.08),
		0px 6px 16px -8px rgba(0, 0, 0, 0.15);
	display: flex;
	flex-direction: row;
	padding: 0 12px;
}

.left-lay {
	position: relative;
	width: 40%;
	height: 100%;
	// border-right: 1px solid #ccc;
	display: flex;
	flex-direction: column;
	// background-color: blanchedalmond;

	.left-line {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 0px 20px;
		padding-top: 10px;

		.line-title {
			font-size: 14px;
			font-weight: 700;
			color: rgba(0, 0, 0, 0.85);
			line-height: 22px;
		}

		.line-value {
			font-size: 14px;
			font-weight: 400;
			color: #7b7b7b;
			line-height: 22px;
			margin-left: 10px;
		}
	}

	.left-draw {
		position: absolute;
		top: 100vh;
		width: 750px;
		height: 611px;
		// flex-grow: 1;
		// flex-shrink: 1;
		background-color: bisque;
	}
}

.tip-lay {
	background: red;
	width: 7px;
	border-radius: 4px;
	background: #ccc;
	margin-top: 46px;
	margin: 46px 15px 85px 15px;
}

.right-lay {
	position: relative;
	width: 60%;
	height: 100%;
	display: flex;
	flex-direction: column;

	.el-icon-close {
		font-size: 16px;
		cursor: pointer;
		width: 46px;
		height: 45px;
		line-height: 45px;
	}

	.right-block-container {
		width: 100%;
		display: flex;
		flex-direction: column;
	}

	.text-right {
		padding: 0 !important;
		text-align: right;
	}

	.right-line {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 0px 12px;
		padding-top: 10px;

		.line-title {
			font-size: 14px;
			font-weight: 700;
			color: rgba(0, 0, 0, 0.85);
			line-height: 22px;
			text-align: left;
			margin-right: 10px;
		}

		.line-content {
			flex-grow: 1;
			flex-shrink: 1;
			display: flex;
			flex-direction: row;
			align-items: center;
		}

		.ipt {
			//     width: 368px;
			width: 100%;
			height: 32px;

			::v-deep .el-input__inner {
				width: 100%;
				height: 32px;
			}

			::v-deep .el-input__inner:focus {
				border: 1px solid #dcdfe6;
			}

			::v-deep .el-input__icon {
				line-height: 32px;
				color: #909399;
			}

			::v-deep .el-input__suffix {
				width: 32px;
				right: 0;
				background: #dee0e3;
			}
		}

		.picker {
			width: 130px;
			margin: 0px 10px;

			::v-deep .el-input__inner {
				width: 130px;
			}

			::v-deep .el-input__suffix {
				background: transparent;
			}
		}

		.orange {
			::v-deep .el-input__inner {
				// width: 130px;
				background-color: #FFDEACFF;
			}
		}

		.divider {
			width: 100%;
			height: 1px;
			background-color: #f0f0f0;
		}
	}

	.right-line.bottom-border {
		padding-bottom: 10px;
		// border-bottom: 1px solid #f0f0f0;
	}

	.flex-row {
		flex-direction: row;
	}

	.flex-column {
		flex-direction: column;
	}
}

.split-title {
	width: 100%;
	font-size: 16px;
	font-weight: 700;
	color: rgba(0, 0, 0, 0.85);
	line-height: 22px;
	padding: 12px 12px;
	border-bottom: 1px solid #f0f0f0;
}

.footer-view {
	width: calc(100% - 30px);
	box-sizing: border-box;
	position: absolute;
	z-index: 10;
	bottom: 16px;
	// padding: 0 15px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	// background-color: red;
	padding-top: 17px;
	border-top: 1px solid #f0f0f0;
	font-size: 16px;
	font-weight: 700;

	button {
		width: 82px !important;
		height: 32px;
		// background: #ffffff;
		// border: 1px solid #d9d9d9;
		margin-left: 12px;
		border-radius: 4px;
		font-size: 14px;
		font-weight: 500;
		line-height: 0;
	}

	button:nth-child(2) {
		// background: #106ebe;
		// color: #fff;
	}
}

.FIX {
	width: 750px;
	height: 611px;
	position: fixed;
	top: -4000px;
	left: -500px;
}
</style>
